<template>
  <div class="box">
    <section class="container container--masthead Expanded masthead--expanded">
      <div class="region region--full masthead-elements">
        <div class="column column--full max-markets">
          <div class="element element--markets desktop">
            <ul class="j-dropdown--expanded-markets list list--markets horizontal">
              <li class="j-option market__item option" v-for="(item, index) in regionData" :key="index"
                @click="handleRegionClick(index)">
                <span>{{ item }}</span>
              </li>
              <li class="market__item dropdown">
                <small class="label">Range</small>
                <i class="icon"></i>
                <label for="dropdownmarkets" class="screen-reader-text">Dropdown Markets</label>
                <select id="dropdownmarkets" class="dropdown dropdown--markets" v-model="timeValue"
                  @change="changeTime">
                  <option selected="" value="minute">1Mi</option>
                  <option value="hour">1H</option>
                  <option value="day">1M</option>
                  <option value="week">1D</option>
                  <option value="month">1W</option>
                  <option value="year">1Y</option>
                  <!--  <option value="P2Y">2Y</option> -->
                </select>
              </li>
            </ul>
            <div class="markets--desktop">
              <div class="markets__table">
                <table class="table table--primary align--right">
                  <tbody class="markets__group" v-if="rData[selectedIndex][0] !== null">
                    <!-- is-active -->
                    <tr class="table__row index is-closed" v-for="(item, index) in rData[selectedIndex]" :key="index">
                      <td class="table__cell">
                        <bg-quote class="positive"><span class="indicator"></span></bg-quote>
                      </td>
                      <td class="table__cell symbol">
                        <router-link :to="{ name: 'stockDetail', params: { symbol: item.symbol } }">{{ item.symbol
                          }}</router-link>
                      </td>
                      <td class="table__cell price">
                        <bg-quote class="ignore-color positive">{{
                          item.open
                        }}</bg-quote>
                      </td>
                      <td class="table__cell change" @mouseover="onHoverStart(item)">
                        <bg-quote :class="item.close - item.open > 0 ? 'positive' : 'www'">{{
                          (item.close - item.open).toFixed(2)
                        }}</bg-quote>
                      </td>
                      <td class="table__cell percent">
                        <bg-quote :class="[item.change_ratio < 0 ? 'negative' : 'positive']">{{ item.change_ratio
                          }}%</bg-quote>
                      </td>
                      <td class="table__cell arrow">
                        <bg-quote :class="[item.change_ratio < 0 ? 'negative' : 'positive']">
                          <i class="icon"></i>
                        </bg-quote>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="markets__chart is-loaded">
                <dataChart :xData="xData" :yData="yData" ref="useChart" v-if="isChart"></dataChart>
              </div>
            </div>
          </div>
          <!-- <div class="element element--movers">
            <div class="header header--small">
              <span class="primary">S&amp;P 500 Movers</span>
            </div>
            <ul class="list list--mover left">
              <li class="mover__item" v-for="item in movesData" :key="item.id">
                <a class="link" href="">
                  <span class="mover__symbol">{{ item.name }}</span>
                  <bg-quote field="percentChange" class="positive">{{
                    item.data
                  }}</bg-quote>
                </a>
              </li>
            </ul>
            <ul class="list list--mover">
              <li class="mover__item" v-for="item in movesTwoData" :key="item.id">
                <a class="link" href="">
                  <span class="mover__symbol">{{ item.name }}</span>
                  <bg-quote field="percentChange" class="negative mover__percent">{{ item.data }}</bg-quote>
                </a>
              </li>
            </ul>
            <div class="markets__ad">
              <a class="link" href="" role="link">Visit Market Data Center<i class="icon icon--angle-right"></i></a>
              <div class="element element--ad is-loaded">
                <div id="ad-market-header-sponsor" class="j-ad lazyloaded">
                  <div id="google_ads_iframe_/2/marketwatch.com/market_header_sponsor_0__container__"
                    style="border: 0pt none">
                    <img src="https://s0.2mdn.net/simgad/8879360226349898804" alt="Advertisement" border="0" width="140"
                      height="31" style="display: block" />
                  </div>
                </div>
              </div>
            </div>
          </div> -->
          <div class="element element--latestNews">
            <div class="header header--small">
              <a class="primary link" href="">Latest News</a>
              <small class="secondary">All Times Eastern</small>
              <div class="group group--buttons">
                <button class="scroll-up js-scroll-up" @click="nextNum">
                  <i class="icon"></i>
                  <span class="screen-reader-text">scroll up</span>
                </button>
                <button class="scroll-down js-scroll-down" @click="nextNumAdd">
                  <i class="icon"></i>
                  <span class="screen-reader-text">scroll down</span>
                </button>
              </div>
            </div>
            <div class="latestNews__wrapper j-scrollViewport">
              <ul class="latestNews j-scrollElement">
                <li class="latestNews__item" v-for="item in latestNews" :key="item.uuid">
                  <router-link class="latestNews__headline"
                    :to="{ name: 'NewDetail', params: { uuid: item.uuid, author: item.author } }">
                    <time class="latestNews__time">{{ item.timeS }}</time>
                    <span class="headline">
                      <small class="latestNews__label barrons">{{
                        item.small
                      }}</small>
                      {{ item.title }}
                    </span>
                  </router-link>
                </li>
                <li class="latestNews__loading is-loading"></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup>
import dataChart from "./dataChart.vue";
import homeRequest from "@/api/home.js";
const props = defineProps(["stockTabs"]);
import dayjs from 'dayjs';
const timeValue = ref('minute')
const xData = ref([])
const yData = ref([])
const isChart = ref(false)
const symBolData = ref('')
const nextValue = ref(1)
onMounted(() => {
  getTime()
  NextNewList(1)
})
const latestNews = ref([])
const nextNum = () => {
  if (nextValue.value > 1) {
    nextValue.value--
    NextNewList(nextValue.value)
  }
}
const nextNumAdd = () => {
  nextValue.value++
  NextNewList(nextValue.value)
}
const NextNewList = (current) => {
  let data = {
    current: current,
    size: 4,
    isImg: 1,
    key: ''
  }
  homeRequest.newsData(data)
    .then((res) => {
      if (res.code === 0) {
        res.data.records.forEach((item) => {
          item.time = dayjs(item.createTime)
          item.formattedHour = item.time.format('HH');
          if (parseInt(item.formattedHour) >= 12) {
            item.timeS = `${item.time.format('HH.mm')}p`
          } else {
            item.timeS = `${item.time.format('HH.mm')}a`
          }
        })
        latestNews.value = res.data.records

      }
    })
    .catch((e) => {
    });
}
let useChart = ref(null)
// 首页地区表格
let regionData = ref([]);
let rData = ref([]);
const selectedIndex = ref(0);
const handleRegionClick = (index) => {
  selectedIndex.value = index;
};
regionData.value = props.stockTabs.map((item) => item.tabName);
rData.value = props.stockTabs.map((item) => item.stocks);
if (rData.value[0][0] !== null) {
  symBolData.value = rData.value[0][0].symbol
}
// 切换
const changeTime = () => {
  isChart.value = false
  xData.value = []
  yData.value = []
  console.log(xData.value )
  console.log(yData.value )
  getTime()
}
const debounce = (func, wait) => {
  let timeout;
  return function () {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), wait);
  };
};
// hover事件
const onHoverStart = debounce((data) => {
  // isChart.value = false
  xData.value = []
  yData.value = []
  symBolData.value = data.symbol
  useChart.value.renderChart()
  getTime()
}, 200)
const getTime = () => {
  let data = {
    symbol: symBolData.value,
    line: timeValue.value
  }
  homeRequest.getLine(data)
  
    .then((res) => {
      console.log(res.data)
      if (res.data !== null && res.data.length > 0) {
        
        res.data.forEach((item) => {
          xData.value.push(item.currentTime)
          yData.value.push(item.close)
          isChart.value = true
        })
      }
    })
}
// 首页第一个moves数据
// let movesData = reactive([
//   { name: "SMCI", data: "6.1", id: "1" },
//   { name: "AAL", data: "8.5", id: "2" },
//   { name: "PWR", data: "5.1", id: "3" },
// ]);
// 首页第二个moves数据
// let movesTwoData = reactive([
//   { name: "TSN", data: "-6.1", id: "1" },
//   { name: "AMGN", data: "-5.7", id: "2" },
//   { name: "WBA", data: "-3.1", id: "3" },
// ]);

</script>

<style scoped lang="scss">
.element--markets .markets__chart {
  background: none;
  border: none;
}
</style>
